<template>
  <view :class="{ dev: config.CURRENT_MODE === 'dev' }">
    <view class="app-name">
      {{ config.APP_NAME }}
      <!-- #ifdef H5-WEB || H5-WEBPRO -->
      <text class="app-mode">（{{ config.MODE_CN }}{{ config.NODE_ENV === "development" ? "--本地调试":'' }}）</text>
      <!-- #endif -->
    </view>
    <!-- #ifndef H5-WEB || H5-WEBPRO -->
    <view class="app-mode">{{ config.MODE_CN }}{{ config.NODE_ENV === "development" ? "--本地调试" : ''}}</view>
    <!-- #endif -->
    <view class="alert-msg" v-show="config.ALERT_MSG">
      {{ config.ALERT_MSG }}
    </view>
    <view class="block-title">公共参数</view>
    <view class="common-params">
      <view class="row">
        <view class="row-title">地区：</view>
        <view class="row-text">{{ config.AREAN_CN }}</view>
      </view>
      <view class="row">
        <view class="row-title">VERSION：</view>
        <view>{{ config.VERSION }}</view>
      </view>
      <view class="row">
        <view class="row-title">COPY_RIGHT：</view>
        <view>{{ config.COPY_RIGHT }}</view>
      </view>
      <view class="row">
        <view class="row-title">uni.getSystemInfoSync().platform</view>
        <view>{{ config.RUNTIME_PLATFORM }}</view>
      </view>
      <view class="row">
        <view class="row-title">process.env.NODE_ENV</view>
        <view>
          {{ config.NODE_ENV }}
        </view>
      </view>
    </view>

    <view class="block-title">平台差异化配置参数</view>
    <view class="row">
      <view class="row-title">请求地址</view>
      <view>{{ config.BASE_URL }}</view>
    </view>
    <view class="row">
      <view class="row-title">CONFIG_PLATFORM</view>
      <view>{{ config.CONFIG_PLATFORM }}</view>
    </view>
    <view class="row">
      <view class="row-title">CURRENT_MODE</view>
      <view>{{ config.CURRENT_MODE }}</view>
    </view>
    <!-- #ifdef APP-PLUS -->
    <view class="row">
      <view class="row-title">App id(uni-app 应用id)</view>
      <view>{{ config.APP_ID }}</view>
    </view>
    <!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<view class="row">
	  <view class="row-title">小程序appid</view>
	  <view>{{ config.AppID }}</view>
	</view>
	<!-- #endif -->
  </view>
</template>

<script>
import config from "@/config.js";
export default {
  data() {
    return {
      config
    };
  }
};
</script>

<style lang="scss" scoped>
/* #ifdef MP-WEIXIN */
$primary-color: #07c160;
/*  #endif  */
/* #ifdef H5 */
$primary-color: #333;
/*  #endif  */
/* #ifdef APP-PLUS */
$primary-color: #1890ff;
/*  #endif  */
/* #ifdef H5-WEB || H5-WEBPRO*/
$primary-color: #08979c;
/*  #endif  */
.app-name {
  font-size: 44rpx;
  text-align: center;
  padding: 20rpx;
  color: $primary-color;
}

.app-mode {
  font-size: 32rpx;
  text-align: center;
  color: #52c41a;
}

.dev .app-mode {
  color: #f5222d;
}

.row {
  margin: 16rpx;
  color: #555;
  padding: 12rpx 10rpx;
  border-bottom: 2rpx solid #eee;

  //   display: flex;
  &-title {
    padding-right: 30rpx;
    font-weight: bold;
    line-height: 1.8em;
    font-size: 24rpx;
  }

  &-text {
    font-size: 28rpx;
  }
}

.block-title {
  margin-top: 20rpx;
  padding: 20rpx 16rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: $primary-color;

  /* #ifndef H5-WEB || H5-WEBPRO */
  &::before {
    content: "";
    display: inline-block;
    width: 12rpx;
    height: 28rpx;
    margin-right: 20rpx;
    background: $primary-color;
    position: relative;
    top: 4rpx;
    // border: 10rpx solid #1890ff;
  }

  /*  #endif  */
}

.alert-msg {
  margin: 20rpx auto;
  padding: 20rpx 60rpx;
  font-size: 24rpx;
  color: #faad14;
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
}

/* #ifdef H5-WEB || H5-WEBPRO */
page {
  width: 1200px;
  margin: auto;
}

.app-name {
  padding: 40rpx 32rpx 40rpx 160rpx;
  text-align: left;
  background-color: $primary-color;
  color: #fff;
  background-image: url("~@/static/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.row {
  display: flex;
}

.block-title {
  background-color: $primary-color;
  color: #fff;

  &::before {
    content: "";
    display: inline-block;
    border: 10rpx solid;
    border-color: transparent transparent transparent #fff;
  }
}

/*  #endif  */
</style>
